<template>
  <div class="register-container">
    <h2>注册</h2>
    <el-form @submit.native.prevent="handleRegister" :model="form" label-width="100px" class="register-form">
      <el-form-item label="手机号">
        <el-input v-model="form.accountName" autocomplete="off" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="验证码">
        <el-row :gutter="20">
          <el-col :span="14">
            <el-input v-model="form.code" autocomplete="off" placeholder="请输入验证码"></el-input>
          </el-col>
          <el-col :span="10">
            <el-button
              :disabled="isSending || countdown > 0"
              @click="sendVerificationCode"
              class="verification-button"
            >
              {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleRegister" class="register-button">
          注册
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      form: {
        accountName: '',
        password: '',
        faceBase: '',
        code: '',
      },
      isSending: false,
      countdown: 0,
    };
  },
  methods: {
    async sendVerificationCode() {
      if (!this.form.accountName) {
        this.$message.error('请输入手机号');
        return;
      }

      this.isSending = true;
      try {
        // Check if the user already exists
        const checkResponse = await axios.post('/api/user-server/user/checkUser',this.form);
        if (checkResponse.data.code !== 200) {
          this.$message.error('用户已存在，不能注册');
          this.isSending = false;
          return;
        }

        // If user does not exist, send the verification code
        const response = await axios.get('api/user-server/user/getCode/' + this.form.accountName);
        if (response.data.code == 200) {
          this.$message.success('验证码已发送');
          this.startCountdown();
        } else {
          this.$message.error('发送验证码失败');
        }
      } catch (error) {
        this.$message.error('请求失败');
        console.error(error);
      } finally {
        this.isSending = false;
      }
    },
    startCountdown() {
      this.countdown = 60;
      const interval = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(interval);
        }
      }, 1000);
    },
    async handleRegister() {
      if (!this.form.code) {
        this.$message.error('请输入验证码');
        return;
      }
      try {
        const response = await axios.post('/api/user-server/user/register', this.form);
        if (response.data.code == 200) {
          this.$message.success('注册成功');
          this.$router.push({ path: '/workbench', query: { forceChangePassword: true } }); // 跳转并传递参数
        } else {
          this.$message.error('注册失败');
        }
      } catch (error) {
        this.$message.error('用户已存在,不可以注册');
        console.error(error);
      }
    },
  },
};
</script>

<style scoped>
.register-container {
  width: 400px;
  margin: 100px auto;
  padding: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
}

.register-form {
  max-width: 100%;
}

.verification-button {
  width: 100%;
  background-color: #409eff;
  color: white;
  border-radius: 4px;
}

.register-button {
  width: 100%;
  background-color: #67c23a;
  color: white;
  border-radius: 4px;
}
</style>